<%--
  Created by IntelliJ IDEA.
  User: 郝龙飞
  Date: 2021/10/30
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../../pages/common/head.jsp" %>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #bottom {
        width: 100%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        /* 方法一 */
        position: fixed;
        bottom: 0;
    }

    label {
        color: #454141;
    }
</style>
<script type="text/javascript">
    $(function () {
        //使用Ajax请求判断账号是否已经存在，局部回传信息
        $("#inputId").blur(function () {
            var id = $("#inputId").val();
            $.ajax({
                url: "http://localhost:8080/HfsSale/user/userController",
                data: "action=existsUser&id=" + id,
                type: "POST",
                success: function (d) {
                    if (d.existsUser) {
                        $("#msg").text("该账号已经存在！");
                        return false;
                    }
                },
                dataType: "json"
            })
        })


        //给id输入框绑定change事件
        $("#inputId").change(function () {
            var id = $("#inputId").val();
            var idPatt = /^\d{1,10}$/;
            if (id == null || id == "") {
                $("#msg").text("账号不能为空！")
                return false;
            }
            if (!idPatt.test(id)) {
                $("#msg").text("账号不合法！");
                return false;
            }
            $("#msg").text("");//重置这个标签里的内容
        })

        //给用户名输入框绑定change事件
        $("#inputName").change(function () {
            var name = $("#inputName").val();
            if (name == null || name == "") {
                $("#msg").text("用户名不能为空！")
                return false;
            }
            $("#msg").text("");//重置这个标签里的内容
        })

        //给密码输入框绑定change事件
        $("#inputPassword").change(function () {
            var password = $("#inputPassword").val();
            if (password == null || password == "") {
                $("#msg").text("密码不能为空！")
                return false;
            }
            $("#msg").text("");//重置这个标签里的内容
        })

        $("#inputRepw").change(function () {
            // 验证确认密码：和密码相同
            var password = $("#inputPassword").val();//此处要重新定义变量password，因为这是一个新的function函数
            var repw = $("#inputRepw").val();
            if (password != repw) {
                $("#msg").text("两次密码不同!");
                return false;
            }
            $("#msg").text("");//重置这个标签里的内容
        })

        $("#submit").click(function () {
            var name = $("#inputName").val();
            var id = $("#inputId").val();
            // 验证确认密码：和密码相同
            var password = $("#inputPassword").val();//此处要重新定义变量password，因为这是一个新的function函数
            var repw = $("#inputRepw").val();
            if (id == null || id == "") {
                $("#msg").text("账号不能为空!");
                return false;
            }
            if (name == null || name == "") {
                $("#msg").text("用户名不能为空!");
                return false;
            }
            if (password == null || password == "") {
                $("#msg").text("密码不能为空!");
                return false;
            }
            if (password != repw) {
                $("#msg").text("两次密码不同!");
                return false;
            }
            var id = $("#inputId").val();
            var idPatt = /^\d{1,10}$/;
            if (!idPatt.test(id)) {
                $("#msg").text("账号不合法！");
                return false;
            }
            $("#msg").text("");//重置这个标签里的内容
        })

    })
</script>
<html>
<head>
    <title>注册页面</title>
</head>
<body style="background-color: #f6f5f5">
<div style="width: 100%;height: 50px;
background-color: #2aabd2;
text-align: center;color: white;font-size: 26px;padding-top: 8px">
    海飞丝洗发护发用品销售系统
</div>
<a href="index.jsp">
    <div style="margin-left: 50px"><img src="imgs/11.jpg" style="width: 300px"/></div>
</a>
<div style="width: 100%;height: 400px;background-color: #79d0f1">
    <div style="color: #928989;font-size: 50px;padding-left: 260px;padding-top: 120px">欢&nbsp;迎&nbsp;注&nbsp;册</div>
    <div style=";width: 500px;height: 350px;position: absolute;right: 180px;top: 205px">
        <a href="pages/user/login.jsp">
            <div style="margin-top: 20px;margin-left: 90px;background-color: #5ec8d2" class="btn btn-info">
                已有账号？点击登录
            </div>
        </a>
        <div id="msg" style="color: red;margin-left: 300px;font-size: 15px"></div>
        <form class="form-horizontal" method="post" action="user/userController?action=regist">
            <%--账号--%>
            <div class="form-group" style="margin-top: 5px">
                <label for="inputId" class="col-sm-2 control-label">账号</label>
                <div class="col-sm-10">
                    <input name="id" type="text" class="form-control" id="inputId" placeholder="请输入账号"/>
                </div>
            </div>
            <%--用户名--%>
            <div class="form-group" style="margin-top: 40px">
                <label for="inputName" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input name="name" type="text" class="form-control" id="inputName" placeholder="请输入用户名"/>
                </div>
            </div>
            <%--密码--%>
            <div class="form-group" style="margin-top: 40px">
                <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input name="password" type="password" class="form-control" id="inputPassword" placeholder="请输入密码"/>
                </div>
            </div>
            <%--确认密码--%>
            <div class="form-group" style="margin-top: 40px">
                <label for="inputRepw" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-10">
                    <input name="repw" type="password" class="form-control" id="inputRepw" placeholder="请再次输入密码"/>
                </div>
            </div>
            <%--提交--%>
            <div class="form-group" style="margin-top: 10px">
                <div class="col-sm-offset-2 col-sm-10">
                    <input value="注册" id="submit" type="submit" class="btn btn-default"/>
                </div>
            </div>
        </form>
    </div>
</div>

<%@include file="../../pages/common/foot.jsp" %>
</body>
</html>
